<template>
	<view class="i-commonly-icon"  :style="[viewStyle]">
		<view class="e-p-t-10" :style="[contentStyle]">
			<view class="title-box e-flex " v-if="option.titleShow">
				<text class="fw-500 e-font-30" :style="[{ color: option.titleTextColor }]">{{ option.titleText }}</text>
			</view>
			<view class="button-list e-flex e-flex-wrap " :class="rowClass">
				<view  v-for="(item, index) in option.list" :key="index" @tap="jumpLink(item.link,item.text)">
					<view class="image">
						<load-image mode="aspectFill" :size="['60rpx']" :src="item.url"></load-image>
					</view>
					<view class="text-center" :style="[{ color: option.buttonTextColor }]">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {px2rpx} from './utils'
	import type {pageLink} from './type'
	
	type CommonlyIconItem = {
		url:string
		text:string
		link:pageLink
	}
	
	const props = withDefaults(defineProps<{
		option : {
			list:CommonlyIconItem[]
			rowNumber:number
			titleShow:boolean
			titleText: string
			titleTextColor: string
			backgroundColor: string
			contentBackgroundColor: string
			buttonTextColor: string
			paddingTop: number
			paddingBottom: number
			paddingX: number
			radiusTop: number
			radiusBottom: number
		}
	}>(), {
		option: () => ({
			list:[],
			rowNumber:4,
			titleShow:false,
			titleText: '',
			titleTextColor: 'rgba(48, 49, 51, 1)',
			backgroundColor: '',
			contentBackgroundColor: 'rgba(255, 255, 255, 1)',
			buttonTextColor: 'rgba(69, 69, 69, 1)',
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})
	
	const ctx = useCurrentInstance()
	const { viewStyle,jumpLink } = useLayoutCompoments(ctx, props.option)
	
	const contentStyle = computed(() => {
		return {
			overflow: 'hidden',
			background: props.option.contentBackgroundColor,
			borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`
		}
	})
	
	const rowClass = computed(() => {
		return props.option.rowNumber === 5 ? 'button-row-5' : 'button-row-4' 
	})
	
</script>

<style lang="scss" scoped>
.title-box {
	padding-left: 20rpx;
	height: 80rpx;
}
.button-list {
	padding-bottom: 30rpx;
	> view {
		margin-top: 30rpx;
		.image {
			width: 60rpx;
			height: 60rpx;
			margin: 0 auto 10rpx auto;
		}
	}
}
.button-row-4{
	>view{
		flex:  0 0 25%;
	}
}
.button-row-5{
	>view{
		flex:  0 0 20%;
	}
}
</style>
